<template>
	<view class="wrap" @click="click">
		<view class="title-wrap">
			<view class="title">
				<view class="icon">
					<u-icon name="grid-fill" color="#3fb0c1" size="15"></u-icon>
				</view>
				<view>{{itemData.name}}</view>
			</view>
			<view class="state">
				{{itemData.status}}
			</view>
		</view>
		<view class="info-wrap">
			<view class="info">
				<view>可容纳：{{itemData.num}}人</view>
				<view>设施设备：{{itemData.device}}</view>
			</view>
		</view>
		<view class="bottom-wrap" v-if="showTime">
			<view class="time">{{itemData.time}}</view>
			<view class="overtime" @click.stop="clickRightBottom">会议加时</view>
		</view>
	</view>
</template>

<script>
export default {
  props: {
    itemData: {
      type: Object,
      default: () => ({}),
    },
    stateMap: {
      type: Object,
      default: () => ({}),
    },
    showQrcode: {
      type: Boolean,
      default: true,
    },
    showTime: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    click() {
      this.$emit('click');
    },
    clickQrcode() {
      this.$emit('clickQrcode');
    },
    clickRightBottom() {
      this.$emit('clickRightBottom');
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap{
	padding: 22rpx;
	border: 1px solid rgba(187, 187, 187, 0.32);
	border-radius:12rpx;
	.title-wrap{
		display: flex;
		justify-content: space-between;
		.title{
			font-size:30rpx;
			color: #101010;
			view{
				display: inline-block;
			}
			.icon{
				margin-right: 14rpx;
			}
		}
		.state{
			border: 1px solid rgba(187, 187, 187, 1);
			font-size: 24rpx;
			border-radius: 6rpx;
			padding: 6rpx 0;
			width: 140rpx;
			text-align: center;
			borderColor: rgba(187, 187, 187, 1);
			background-color: rgba(240, 224, 91, 0.35);
			color: #000C17;
		}
	}
	.info-wrap{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-top: 28rpx;
		padding-bottom: 26rpx;
		.info{
			font-size: 28rpx;
			color: #101010;
			view{
				padding: 4rpx;
			}
		}
		.qrcode{
			padding-right: 28rpx;
		}
	}
	.bottom-wrap{
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid rgba(187, 187, 187,0.4);
		padding-top: 22rpx;
		gap: 20rpx;
		.time{
			color: #C4C4C4;
			font-size:24rpx;
		}
		.overtime{
			width: 136rpx;
			height: 50rpx;
			border-radius: 6rpx;
			padding: 6rpx 0;
			background-color: #3fb0c1;
			color: rgba(255, 255, 255, 1);
			font-size: 24rpx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
.ycopendoor{
	border:1px solid #F1F1F1;
	padding:15rpx;
}
</style>